<template>
  <div class="rank-container">
    <div class="rank-header">
      <div>排名</div>
      <div>姓名</div>
      <div>总分</div>
      <div>操作</div>
    </div>

    <div v-for="(item, index) in tableData" :key="index">
      <div
        class="rank-item"
        :class="{ expanded: item.expanded }"
        @click="toggleExpand(index)"
      >
        <div class="rank-summary">
          <div class="icon-rank-container">
            <i class="iconfont icon-fangxiangxia expand-icon"></i>
            <div class="rank-index">{{ item.rank }}</div>
          </div>
          <div>{{ item.name }}</div>
          <div>{{ item.score }}</div>
          <div class="action-update" @click.stop="updateClickHandler()">
            修改
          </div>
        </div>
      </div>

      <div
        class="rank-detail"
        :style="{
          maxHeight: item.expanded ? '200px' : '0',
          padding: item.expanded ? '20px' : '0',
        }"
      >
        <div class="detail-content">
          <div class="detail-item">
            <span class="label">组织:</span
            ><span class="value">{{ item.org }}</span>
          </div>
          <div class="detail-item">
            <span class="label">赛项专业:</span
            ><span class="value">{{ item.major }}</span>
          </div>
          <div class="detail-item">
            <span class="label">理论得分:</span
            ><span class="value">{{ item.theory }}</span>
          </div>
          <div class="detail-item">
            <span class="label">技能得分:</span
            ><span class="value">{{ item.skill }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 更新分数的弹框 -->
    <updateScoreDialog
      :visible="showDialog"
      :number="89"
      @close="showDialog = false"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import updateScoreDialog from "./updateScoreDialog.vue";
const showDialog = ref(false);
const tableData = ref([
  {
    rank: 1,
    name: "张三路",
    score: 100,
    org: "北京大学医学部",
    major: "基础医学",
    theory: 20,
    skill: 80,
    expanded: false,
  },
  {
    rank: 2,
    name: "金瑶123r4qr5t",
    score: 98.12,
    org: "北京大学医学部",
    major: "基础医学",
    theory: 20,
    skill: 78.12,
    expanded: false,
  },
  {
    rank: 3,
    name: "段小刚",
    score: 98,
    org: "北京大学医学部",
    major: "基础医学",
    theory: 20,
    skill: 78,
    expanded: false,
  },
  {
    rank: 4,
    name: "许昕薇",
    score: 95.12,
    org: "北京大学医学部",
    major: "基础医学",
    theory: 19,
    skill: 76.12,
    expanded: false,
  },
  {
    rank: 5,
    name: "阎棋锁",
    score: 94,
    org: "北京大学医学部",
    major: "基础医学",
    theory: 18,
    skill: 76,
    expanded: false,
  },
  {
    rank: 6,
    name: "荀世小",
    score: 92,
    org: "北京大学医学部",
    major: "基础医学",
    theory: 20,
    skill: 72,
    expanded: false,
  },
]);

const toggleExpand = (index) => {
  // 切换展开状态
  tableData.value.forEach((item, i) => {
    if (i === index) {
      item.expanded = !item.expanded;
    } else {
      item.expanded = false;
    }
  });
};

const updateClickHandler = () => {
  console.log("修改分数按钮点击");
  showDialog.value = true;
};
</script>

<style scoped>
@import url("@/assets/scss/megaGame.scss");
</style>
